<template>
  <div class="account-settings-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">
          <el-icon class="title-icon"><Setting /></el-icon>
          账户设置
        </h1>
        <p class="page-subtitle">管理您的账户信息和偏好设置</p>
      </div>
    </div>

    <!-- 设置内容 -->
    <div class="settings-content">
      <div class="settings-container">
        <!-- 个人信息 -->
        <div class="settings-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon><User /></el-icon>
              个人信息
            </h3>
            <p class="section-description">管理您的基本账户信息</p>
          </div>
          <div class="section-content">
            <el-form :model="profileForm" label-width="120px" class="profile-form">
              <div class="avatar-section">
                <div class="avatar-container">
                  <el-avatar :size="100" :src="profileForm.avatar">
                    <el-icon><User /></el-icon>
                  </el-avatar>
                  <el-button type="primary" size="small" @click="changeAvatar">
                    <el-icon><Camera /></el-icon>
                    更换头像
                  </el-button>
                </div>
              </div>
              <el-form-item label="用户名">
                <el-input v-model="profileForm.username" placeholder="请输入用户名" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="profileForm.email" placeholder="请输入邮箱" />
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="profileForm.phone" placeholder="请输入手机号" />
              </el-form-item>
              <el-form-item label="个人简介">
                <el-input 
                  v-model="profileForm.bio" 
                  type="textarea" 
                  :rows="3"
                  placeholder="介绍一下自己吧..."
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveProfile">
                  <el-icon><Check /></el-icon>
                  保存信息
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!-- 安全设置 -->
        <div class="settings-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon><Lock /></el-icon>
              安全设置
            </h3>
            <p class="section-description">保护您的账户安全</p>
          </div>
          <div class="section-content">
            <div class="security-items">
              <div class="security-item">
                <div class="item-info">
                  <h4>修改密码</h4>
                  <p>定期更新密码以确保账户安全</p>
                </div>
                <el-button @click="showChangePassword = true">修改密码</el-button>
              </div>
              <div class="security-item">
                <div class="item-info">
                  <h4>两步验证</h4>
                  <p>为您的账户添加额外的安全保护</p>
                </div>
                <el-switch v-model="twoFactorEnabled" @change="toggleTwoFactor" />
              </div>
              <div class="security-item">
                <div class="item-info">
                  <h4>登录设备</h4>
                  <p>管理您的登录设备和会话</p>
                </div>
                <el-button @click="showDevices = true">查看设备</el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 隐私设置 -->
        <div class="settings-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon><View /></el-icon>
              隐私设置
            </h3>
            <p class="section-description">控制您的隐私和可见性</p>
          </div>
          <div class="section-content">
            <div class="privacy-items">
              <div class="privacy-item">
                <div class="item-info">
                  <h4>个人资料可见性</h4>
                  <p>控制谁可以看到您的个人资料</p>
                </div>
                <el-select v-model="profileVisibility" placeholder="选择可见性">
                  <el-option label="公开" value="public" />
                  <el-option label="仅好友" value="friends" />
                  <el-option label="私密" value="private" />
                </el-select>
              </div>
              <div class="privacy-item">
                <div class="item-info">
                  <h4>观看历史</h4>
                  <p>是否保存您的观看历史记录</p>
                </div>
                <el-switch v-model="saveWatchHistory" @change="toggleWatchHistory" />
              </div>
              <div class="privacy-item">
                <div class="item-info">
                  <h4>推荐算法</h4>
                  <p>基于您的观看历史推荐内容</p>
                </div>
                <el-switch v-model="enableRecommendations" @change="toggleRecommendations" />
              </div>
              <div class="privacy-item">
                <div class="item-info">
                  <h4>数据分析</h4>
                  <p>允许我们分析您的使用数据以改善服务</p>
                </div>
                <el-switch v-model="allowAnalytics" @change="toggleAnalytics" />
              </div>
            </div>
          </div>
        </div>

        <!-- 通知设置 -->
        <div class="settings-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon><Bell /></el-icon>
              通知设置
            </h3>
            <p class="section-description">管理您接收的通知类型</p>
          </div>
          <div class="section-content">
            <div class="notification-items">
              <div class="notification-item">
                <div class="item-info">
                  <h4>邮件通知</h4>
                  <p>接收重要更新和活动通知</p>
                </div>
                <el-switch v-model="emailNotifications" @change="toggleEmailNotifications" />
              </div>
              <div class="notification-item">
                <div class="item-info">
                  <h4>推送通知</h4>
                  <p>在浏览器中显示推送通知</p>
                </div>
                <el-switch v-model="pushNotifications" @change="togglePushNotifications" />
              </div>
              <div class="notification-item">
                <div class="item-info">
                  <h4>新视频提醒</h4>
                  <p>关注的内容有新视频时通知</p>
                </div>
                <el-switch v-model="videoNotifications" @change="toggleVideoNotifications" />
              </div>
              <div class="notification-item">
                <div class="item-info">
                  <h4>评论回复</h4>
                  <p>有人回复您的评论时通知</p>
                </div>
                <el-switch v-model="commentNotifications" @change="toggleCommentNotifications" />
              </div>
            </div>
          </div>
        </div>

        <!-- 账户管理 -->
        <div class="settings-section">
          <div class="section-header">
            <h3 class="section-title">
              <el-icon><Warning /></el-icon>
              账户管理
            </h3>
            <p class="section-description">管理您的账户状态</p>
          </div>
          <div class="section-content">
            <div class="account-actions">
              <div class="action-item">
                <div class="item-info">
                  <h4>导出数据</h4>
                  <p>下载您的所有数据副本</p>
                </div>
                <el-button @click="exportData">导出数据</el-button>
              </div>
              <div class="action-item">
                <div class="item-info">
                  <h4>注销账户</h4>
                  <p>永久删除您的账户和所有数据</p>
                </div>
                <el-button type="danger" @click="showDeleteAccount = true">注销账户</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="showChangePassword" title="修改密码" width="400px">
      <el-form :model="passwordForm" label-width="100px">
        <el-form-item label="当前密码">
          <el-input v-model="passwordForm.currentPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showChangePassword = false">取消</el-button>
        <el-button type="primary" @click="changePassword">确认修改</el-button>
      </template>
    </el-dialog>

    <!-- 登录设备对话框 -->
    <el-dialog v-model="showDevices" title="登录设备" width="600px">
      <div class="devices-list">
        <div v-for="device in devices" :key="device.id" class="device-item">
          <div class="device-info">
            <el-icon class="device-icon"><Monitor /></el-icon>
            <div class="device-details">
              <h4>{{ device.name }}</h4>
              <p>{{ device.location }} · {{ device.lastActive }}</p>
            </div>
          </div>
          <div class="device-actions">
            <el-button v-if="!device.current" size="small" type="danger" @click="logoutDevice(device)">
              退出登录
            </el-button>
            <el-tag v-else type="success">当前设备</el-tag>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 删除账户确认对话框 -->
    <el-dialog v-model="showDeleteAccount" title="注销账户" width="500px">
      <div class="delete-warning">
        <el-icon class="warning-icon"><Warning /></el-icon>
        <h3>警告：此操作不可撤销</h3>
        <p>注销账户将永久删除您的所有数据，包括：</p>
        <ul>
          <li>个人资料和设置</li>
          <li>上传的视频内容</li>
          <li>收藏和观看历史</li>
          <li>评论和互动记录</li>
        </ul>
        <p>请确认您真的要注销账户。</p>
      </div>
      <template #footer>
        <el-button @click="showDeleteAccount = false">取消</el-button>
        <el-button type="danger" @click="deleteAccount">确认注销</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElIcon, ElForm, ElFormItem, ElInput, ElButton, ElSwitch, ElSelect, ElOption, ElAvatar, ElDialog, ElTag } from 'element-plus'
import { 
  Setting, User, Lock, View, Bell, Warning, Camera, Check, Monitor 
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const showChangePassword = ref(false)
const showDevices = ref(false)
const showDeleteAccount = ref(false)

// 个人信息表单
const profileForm = reactive({
  username: '用户昵称',
  email: 'user@example.com',
  phone: '138****8888',
  bio: '这是一个热爱视频的用户',
  avatar: '/images/avatars/微信图片_20251027113131.jpg'
})

// 密码修改表单
const passwordForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 安全设置
const twoFactorEnabled = ref(false)

// 隐私设置
const profileVisibility = ref('public')
const saveWatchHistory = ref(true)
const enableRecommendations = ref(true)
const allowAnalytics = ref(true)

// 通知设置
const emailNotifications = ref(true)
const pushNotifications = ref(false)
const videoNotifications = ref(true)
const commentNotifications = ref(true)

// 登录设备
const devices = ref([
  {
    id: 1,
    name: 'Windows PC - Chrome',
    location: '北京市',
    lastActive: '2小时前',
    current: true
  },
  {
    id: 2,
    name: 'iPhone - Safari',
    location: '上海市',
    lastActive: '1天前',
    current: false
  },
  {
    id: 3,
    name: 'MacBook - Chrome',
    location: '广州市',
    lastActive: '3天前',
    current: false
  }
])

// 方法
const changeAvatar = () => {
  console.log('更换头像')
  // 实现头像上传功能
}

const saveProfile = () => {
  console.log('保存个人信息:', profileForm)
  // 实现保存个人信息功能
}

const toggleTwoFactor = (value) => {
  console.log('两步验证:', value)
  // 实现两步验证开关功能
}

const toggleWatchHistory = (value) => {
  console.log('保存观看历史:', value)
  // 实现观看历史开关功能
}

const toggleRecommendations = (value) => {
  console.log('推荐算法:', value)
  // 实现推荐算法开关功能
}

const toggleAnalytics = (value) => {
  console.log('数据分析:', value)
  // 实现数据分析开关功能
}

const toggleEmailNotifications = (value) => {
  console.log('邮件通知:', value)
  // 实现邮件通知开关功能
}

const togglePushNotifications = (value) => {
  console.log('推送通知:', value)
  // 实现推送通知开关功能
}

const toggleVideoNotifications = (value) => {
  console.log('视频通知:', value)
  // 实现视频通知开关功能
}

const toggleCommentNotifications = (value) => {
  console.log('评论通知:', value)
  // 实现评论通知开关功能
}

const changePassword = () => {
  console.log('修改密码:', passwordForm)
  // 实现修改密码功能
  showChangePassword.value = false
}

const logoutDevice = (device) => {
  console.log('退出设备:', device)
  // 实现退出设备功能
}

const exportData = () => {
  console.log('导出数据')
  // 实现数据导出功能
}

const deleteAccount = () => {
  console.log('注销账户')
  // 实现账户注销功能
  showDeleteAccount.value = false
}

onMounted(() => {
  // 页面加载时的初始化
})
</script>

<style scoped>
.account-settings-page {
  width: 100vw;
  max-width: none;
  min-height: 100vh;
  background: #f9fafb;
  margin: 0;
  padding: 0;
}

.page-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  padding: 60px 0;
  color: white;
  text-align: center;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-title {
  font-size: 2.5rem;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.title-icon {
  font-size: 2.5rem;
}

.page-subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
  margin: 0;
}

.settings-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.settings-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.settings-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.section-header {
  background: #f8fafc;
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.section-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-description {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
}

.section-content {
  padding: 24px;
}

.profile-form {
  max-width: 600px;
}

.avatar-section {
  margin-bottom: 24px;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.security-items,
.privacy-items,
.notification-items,
.account-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.security-item,
.privacy-item,
.notification-item,
.action-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.item-info h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.item-info p {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
}

.devices-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.device-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.device-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.device-icon {
  font-size: 24px;
  color: #6b7280;
}

.device-details h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
}

.device-details p {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 0;
}

.delete-warning {
  text-align: center;
  padding: 20px;
}

.warning-icon {
  font-size: 48px;
  color: #ef4444;
  margin-bottom: 16px;
}

.delete-warning h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.delete-warning p {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0 0 12px 0;
}

.delete-warning ul {
  text-align: left;
  margin: 16px 0;
  padding-left: 20px;
}

.delete-warning li {
  font-size: 0.9rem;
  color: #6b7280;
  margin-bottom: 4px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .settings-content {
    padding: 20px 15px;
  }
  
  .section-header,
  .section-content {
    padding: 20px;
  }
  
  .security-item,
  .privacy-item,
  .notification-item,
  .action-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .device-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .avatar-container {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .page-title {
    font-size: 1.5rem;
  }
  
  .settings-content {
    padding: 15px 10px;
  }
  
  .section-header,
  .section-content {
    padding: 15px;
  }
}
</style>
